<template>
  <div style="display: flex;justify-content: center">
    <h1>销售信息查询</h1>
  </div>
  <!--    表格-->
  <div>
    <el-table :data="cutBean.records" style="width: 100%">
      <el-table-column prop="customerBean.name" label="客户名称"/>
      <el-table-column prop="salesperson" label="销售员"/>
      <el-table-column prop="date" label="销售时间"/>
      <el-table-column prop="totalPrice" label="订单总额"/>
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button type="danger" @click="dialogVisible=true,show(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:currentPage="cutBean.current"
        v-model:page-size="cutBean.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutBean.total"
        @current-change="findByItem"
    />
  </div>

  <!--    条件查询-->
  <div>
    <!--    条件查询-->

    <div style="display: flex;justify-content: space-around;margin-top: 38px">
      <div style="width: 350px;">客户名称:
        <el-input v-model="findObj.customerName" style="width: 220px"/>
      </div>
      <div>起始日期
        <el-date-picker
            v-model="findObj.startDate"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
        />
      </div>
      <div>结束日期
        <el-date-picker
            v-model="findObj.endDate"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
        />
      </div>
      <div>
        <el-button type="primary" @click="findByItem(1)">查询</el-button>
      </div>
    </div>

    <!--查看详情弹出框-->
    <el-dialog
        v-model="dialogVisible"
        title="销售信息详情"
        width="30%"
    >
      <el-form
          ref="userForm"
          :model="infoObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
          style="width: 400px;"
      >
        <el-form-item label="客户名称：" prop="">
          {{infoObj.customerBean.name}}
        </el-form-item>
        <el-form-item label="销售员：" prop="">
          {{infoObj.salesperson}}
        </el-form-item>
        <el-form-item label="销售日期：" prop="">
          {{infoObj.date}}
        </el-form-item>
        <el-form-item label="订单金额：" prop="">
          {{infoObj.totalPrice}}
        </el-form-item>
        <el-form-item label="送货地址：" prop="">
          {{infoObj.address}}
        </el-form-item>
        <el-form-item label="出库物品明细：" prop="">
          <el-table :data="sellerInfo.sellInfoList" style="width: 100%">
            <el-table-column prop="product.name" label="商品名称"  />
            <el-table-column prop="product.brand" label="品牌"  />
            <el-table-column prop="product.sellPrice" label="成交价"  />
            <el-table-column prop="num" label="销售数量"  />
          </el-table>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutBean: {},
      findObj: {},
      infoObj: {},
      dialogVisible: false,
      infoVisible: false,
      sellerInfo: {},
    }
  },
  methods: {
    findByItem(pageNO) {
      this.findObj.pageNO = pageNO;
      axios.get("/project/sell/findByItem", {
        params: this.findObj
      }).then(resp => {
        this.cutBean = resp.data;
      })
    },
    show(obj) {
      this.infoVisible = true;
      this.infoObj = obj;
      axios.get("/project/sell/findById", {
        params: {
          id: obj.id
        }
      }).then(resp => {
        this.sellerInfo = resp.data
      })
    },

  },
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>

</style>